<template>
  <page-wrap
    back
    hideTab
    :show-top="false"
    :bgColor="topBg"
    :dark="false"
    class="pageWrap"
  >
    <template v-slot:title>
      <view class="searchBox slotSearch">
        <!-- <view class="rerurn-btn" @click="cancelLastLevel" v-if="showReturnBtn || showReturnBtnTop"></view> -->
        <view class="avatar" @click="handleAvatarClick">
          <img class="avatarItem" :src="userInfo.pic || defaultAvatar" alt="" />
          <img
            :src="careerVipImg"
            alt=""
            class="careerVipImg"
            v-if="subVipStatus == 10"
          />
          <view :class="{ updateDot: true, hideDot: isDotHide }"></view>
        </view>
        <view class="search" @click="handleToSearch">
          <image class="icon" :src="searchIcon"></image>
          <view class="desc">搜索您感兴趣的职业</view>
        </view>
      </view>
    </template>

    <view
      class="wrapper"
      :style="'padding-top:' + (navHeight - 8) + 'px;height: 100vh'"
      type="line"
    >
      <view class="topTabs">
        <view class="cardTitleContainer">
          <u-tabs
            :current="currentTopTabIndex"
            :show-bar="false"
            bg-color="transparent"
            name="navName"
            :list="topTabsList"
            @change="handleChangeTab"
            :active-item-style="activeItemStyle"
            :gutter="24"
            font-size="28"
            :inactive-color="'#98A0B0'"
          ></u-tabs>
        </view>
        <view class="filterImg" @click="openFilterBox">
          <text>筛选</text>
          <image :src="filterImg2" v-show="!isFilterImgPlaying"></image>
          <image
            :src="filterImg"
            v-show="isFilterImgPlaying"
            @load="filterImgLoad"
          ></image>
        </view>
      </view>

      <view class="fixedTitleContainer">
        <view
          :class="{ fixedTitle: true, showup: showFixed }"
          v-show="showFixed"
        >
          <text class="fixedTagTitle"
            >{{ fixedTitle.parentTitle }} · {{ fixedTitle.tagTitle }}</text
          >
          <image
            class="fixedTitlePhoto"
            v-if="fixedTitle.posImg"
            :class="{ scaleImg: true }"
            :src="fixedTitle.posImg"
          >
          </image>
        </view>
      </view>
      <scroll-view
        class="scrollBox"
        :style="'height: calc(100vh - ' + '132rpx);'"
        @scrolltolower="scrolltolower"
        @scroll="watchScroll"
        :scroll-y="true"
        :lower-threshold="300"
        @handleScroll="handleScroll"
        :show-scrollbar="false"
        :enhanced="true"
        :scroll-into-view="scrollDomId"
      >
        <view id="scrollTop"></view>
        <view class="card recomBox" id="recom" v-if="isHotRecommandShow">
          <view class="recomBoxTitle">
            <img :src="recomBoxIcon" class="recomBoxIcon" alt="" />
            <view class="recomBoxName">热门推荐</view>
          </view>
          <view class="swiper-box" :style="{ height: 140 + 'px' }">
            <view class="swiper-item">
              <view class="posList recomPosList">
                <view
                  class="posItem"
                  v-for="(recom, index) in recommendList"
                  :key="recom.navId"
                  @click="toPositionDetail(recom, {})"
                >
                  <view class="avator">
                    <image class="recomPosImg" :src="recom.positionPic"></image>
                    <img
                      :src="addCollectIcon"
                      v-if="!recom.collect"
                      :class="[
                        'addCollectIcon',
                        recom.isClicked ? 'isClicked' : ''
                      ]"
                      alt=""
                      @click.stop="clickCollect(recom, index)"
                      :id="recom.navId"
                    />
                    <img
                      :src="collectedtIcon"
                      v-if="recom.collected"
                      class="addCollectIcon"
                      alt=""
                    />
                  </view>
                  <text class="cate name">{{ recom.positionName }}</text>
                  <text class="cate cateTop">{{ recom.topName }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="card recentBox" id="recent" v-if="isRecentRecommandShow">
          <view class="recentBoxTitle">
            <img :src="recentBoxIcon" class="recentBoxIcon" alt="" />
            <view class="recentBoxName">近期推荐</view>
          </view>
          <view class="swiper-box">
            <view class="swiper-item">
              <view
                :class="[
                  'posList',
                  'recentPosList',
                  isRecentMore && 'isRecentMore'
                ]"
                :style="{ height: recentPosListHeight + 'rpx' }"
              >
                <view
                  class="posItem"
                  v-for="recent in recentRecommendList"
                  :key="recent.navId"
                  @click="toPositionDetail(recent, {})"
                >
                  <view class="avator">
                    <image class="recentPosImg" :src="recent.navPhoto"></image>
                  </view>
                  <text class="cate name">{{ recent.navName }}</text>
                  <!-- <text class="cate cateTop">{{ categoryTitle}}</text> -->
                </view>
              </view>
            </view>
          </view>
          <view
            class="recentMoreBtn"
            @click="handleRecentMoreClick"
            v-if="recentRecommendList.length > 6"
          >
            {{ isRecentMore ? '收起' : '展开查看更多' }}
            <img :src="recentMoreArrow" alt="" class="recentMoreArrow" />
          </view>
          <!-- 不展示按钮的时候要填补空白 -->
          <view class="recentMoreBlank" v-else> </view>
        </view>
        <view class="card recomBox" id="config" v-if="showCollegeExtraConfig">
          <view class="recomBoxTitle">
            <img :src="recomBoxIcon" class="recomBoxIcon" alt="" />
            <view class="recomBoxName">热门职业</view>
          </view>
          <view class="swiper-box" :style="{ height: 140 + 'px' }">
            <view class="swiper-item">
              <view class="posList recomPosList hotPositionList">
                <view
                  class="posItem"
                  v-for="(recom, index) in collegeExtraConfigList"
                  :key="index"
                  @click="toPositionDetail(recom, {})"
                >
                  <view class="avator">
                    <image class="recomPosImg" :src="recom.positionPic"></image>
                    <!-- <img
                      :src="addCollectIcon"
                      v-if="!recom.collect"
                      :class="[
                        'addCollectIcon',
                        recom.isClicked ? 'isClicked' : '',
                      ]"
                      alt=""
                      @click.stop="clickCollect(recom, index)"
                      :id="recom.navId"
                    /> -->
                    <!-- <img
                      :src="collectedtIcon"
                      v-if="recom.collected"
                      class="addCollectIcon"
                      alt=""
                    /> -->
                  </view>
                  <text class="cate name">{{ recom.positionName }}</text>
                  <text class="cate cateTop">{{ recom.topName }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>

        <view
          class="card allPosition"
          id="cardHeader"
          v-if="
            !loading && positionsListShow.length > 0 && !showCollegeExtraConfig
          "
        >
          <view class="cardHeader">
            <view class="cateNameContainer" @click="openFilterBox">
              <img class="cateNameIcon" :src="allCareerIcon" alt="" />
              <text class="cateName">{{ categoryTitle }} </text>
              <text class="cateNum">{{ positionNum || '' }}</text>
              <img class="cateArrowIcon" :src="cateArrowIcon" alt="" />
            </view>
          </view>
          <view v-if="!loading && positionsListShow.length > 0">
            <view class="positionList">
              <view
                class="posCard scrollItem"
                v-for="(pos, i) in positionsListShow"
                :key="pos.navId"
              >
                <view :class="{ cateTag: true }">
                  <text class="cateTagTitle"
                    >{{ pos.parentName }} · {{ pos.navName }}</text
                  >
                  <image
                    class="photo"
                    v-if="pos.children.length > 1"
                    :class="{ scaleImg: i == 0 }"
                    :src="pos.navPhoto"
                  >
                  </image>
                </view>
                <view class="cateContent">
                  <view
                    class="positionItem"
                    v-for="(item, index) in pos.children"
                    :key="item.valueId"
                    @click="toPositionDetail(item, pos)"
                    :style="{ 'margin-left': index % 2 == 1 ? '16rpx' : '' }"
                  >
                    <text class="tagTitle">{{ item.navName }}</text>
                    <text class="desc">{{ item.navDesc || '' }}</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view v-if="!loading && positionsListShow.length == 0">
            <view class="positionList" style="height: 450rpx">
              <Empty
                :baseImg="emptyImg"
                text="暂无相关职业~"
                :fontWeight="400"
                class="empty"
              />
            </view>
          </view>
          <!-- <view class="loading" v-if="loading">
            <u-loading mode="circle" size="40" :show="loading"></u-loading>
            <text class="text">加载中</text>
          </view> -->
          <u-loadmore
            v-if="positionsListShow.length > 0"
            :status="status"
            :load-text="loadText"
            font-size="24"
            color="#bfbfbf"
          />
        </view>
      </scroll-view>
    </view>
    <filterBox ref="filterBox" @update="handleFilter($event)"></filterBox>
    <myPositionsPopup
      ref="myPositionsPopup"
      :userInfo="userInfo"
      :listCollection="listCollection"
      :listLockList="listLockList"
      :myPositionsPopupShow.sync="myPositionsPopupShow"
      v-if="myPositionsPopupShow"
      @onClickMoreCollection="onClickMoreCollection"
      @onClickMoreUnlock="onClickMoreUnlock"
      @onClickSubscribeUnlock="onClickSubscribeUnlock"
    >
    </myPositionsPopup>
    <u-modal
      v-model="updateBox"
      :content-style="{ 'word-break': 'break-all' }"
      title="更新公告"
    >
      <view class="slot-content">
        <text>{{ updateContent }}</text>
      </view>
    </u-modal>
    <view
      class="arrowUpward"
      v-if="distance > 400"
      :animation="animationDataTop"
      @click="handleBackTop"
    >
      <image :src="backtop" name="arrow-upward"></image>
    </view>
    <u-popup
      class="stylePopup"
      v-model="isPopupCollectShow"
      mode="bottom"
      width="530rpx"
      height="955rpx"
      border-radius="36rpx"
      @close="onPopupClose()"
    >
      <view class="stylePopupContainer">
        <view class="stylePopupTop">
          <view class="stylePopupTopLine"></view>
          <view class="stylePopupTitleContainer">
            <view class="stylePopupTitle">我的关注</view>
            <view
              class="stylePopupEdit"
              @click="clickPopupEdit"
              v-if="listCollection.length"
              >{{ editModeText }}</view
            >
          </view>
        </view>

        <view class="styleListContainer">
          <view class="Grid" v-if="listCollection.length">
            <view
              class="styleSubListItem"
              v-for="item in listCollection"
              :key="item.positionId"
              @click="collectionToDetail(item)"
            >
              <view class="styleSubListItemDeleteContainer">
                <image
                  v-if="isCollectionEditMode"
                  class="styleSubListItemImageDelete"
                  :src="iconDeleteSrc"
                  @click.stop="editCollection(item)"
                ></image>
                <image v-else class="styleSubListItemImageDelete"> </image>
              </view>
              <view class="styleSubListItemJob">{{ item.positionName }}</view>
              <view class="styleSubListItemSpecialty"
                >{{ item.topName }} · {{ item.parentName }}</view
              >
              <view class="styleSubListItemDescription">{{
                item.positionDesc
              }}</view>
              <view
                class="hasUpdateDot"
                v-if="item.isUpdate && !isCollectionEditMode"
              ></view>
            </view>
          </view>
          <view v-if="listCollection.length == 0">
            <view class="positionList" style="height: 450rpx">
              <Empty
                :baseImg="emptyImg"
                text="暂无关注的职业~"
                :fontWeight="400"
                class="empty"
              />
            </view>
          </view>
        </view>
      </view>
    </u-popup>
    <u-popup
      class="stylePopup"
      v-model="isPopupLockShow"
      mode="bottom"
      width="530rpx"
      height="955rpx"
      border-radius="36rpx"
      @close="onPopupClose()"
    >
      <view class="stylePopupContainer">
        <view class="stylePopupTop">
          <view class="stylePopupTopLine"></view>
          <view class="stylePopupTitleContainer">
            <view class="stylePopupTitle">已解锁职业</view>
          </view>
        </view>

        <view class="styleListContainer">
          <view class="Grid" v-if="listLockList.length">
            <view
              class="styleSubListItem"
              v-for="item in listLockList"
              :key="item.navId"
              @click="collectionToDetail(item)"
            >
              <view class="styleSubListItemJob">{{ item.positionName }}</view>
              <view class="styleSubListItemSpecialty"
                >{{ item.topName }} · {{ item.parentName }}</view
              >
              <view class="styleSubListItemDescription">{{
                item.positionDesc
              }}</view>
              <view class="hasUpdateDot" v-if="item.isUpdate"></view>
            </view>
          </view>
          <view v-if="listLockList.length == 0">
            <view class="positionList" style="height: 450rpx">
              <Empty
                :baseImg="emptyImg"
                text="暂无已解锁的职业~"
                :fontWeight="400"
                class="empty"
              />
            </view>
          </view>
        </view>
      </view>
    </u-popup>
    <LoginDialog
      ref="loginDialog"
      @loginSuccessBack="loginSuccessBack"
    ></LoginDialog>
    <!-- AI面评活动弹窗弃用 悬浮按钮-->
    <!-- <view class="aiEnter" :animation="animationData" @click="clickActbtn">
      <u-image width="160rpx" height="213rpx" :src="aiActBtnSrc"></u-image>
      <text class="aiText">{{ animationText }}</text>
      <u-badge v-if="showAnimationBadge" :is-dot="true" type="error"></u-badge>
    </view> -->
    <!-- 返回到查询专业页面 -->
    <!-- <view v-if="showReturnBtn" class="return-btn" @click="popCareerClick">
      <image style="width:40rpx;height:40rpx;" :src="returnBtnIcon"></image>
      <view>返回</view>
    </view> -->
    <!-- 大弹窗 -->
    <!-- <ActPromotion
      :show="showActPromotion"
      :backgroundSrc="alertGoods.goodsPic"
      @close="closeAlert"
      @next="clickAlert"
    ></ActPromotion> -->
  </page-wrap>
</template>

<script>
import WxLoginMixin from '@/mixins/wxLogin';
import share from '@/mixins/share';
import filterBox from './components/filterBox.vue';
import myPositionsPopup from './components/myPositionsPopup.vue';
import Empty from '@/components/Empty.vue';
import { addToCollection, getPositionTemplate } from '@/api/modules/career';

import {
  positionRecommendList,
  getNotice,
  getCollectionListData,
  cancelCollection,
  unlockedNavigationPosition,
  getNavigationTree,
  getCustomerPositionTree,
  getSonNavigationTree,
  getNavigationListByTagId,
  recommendFirstLayerList,
  recentRecommendPositions,
  getAllCollegeExtraConfig
} from '@/api/modules/career';
import { getPersonDetail } from '@/api/index';
import { throttle } from 'lodash';
import LoginDialog from '@/components/LoginDialog';
import { getMySubscribeStatus } from '@/api/modules/vip.js';
import { addBuryingPoint, getToastProId } from '@/api/modules/career';
import ActPromotion from '../../../components/activities/activitiePromotion.vue';
export default {
  mixins: [WxLoginMixin, share],
  name: 'allCategory',
  components: {
    myPositionsPopup,
    filterBox,
    Empty,
    LoginDialog,
    ActPromotion
  },
  data() {
    return {
      positionTagId: '', // 上一级页面的职业id
      fromOrigin: '', // 上一级页面的标识
      activeItemStyle: {
        position: 'relative',
        fontSize: '36rpx',
        fontWeight: 600,
        color: '#fff'
      },
      isCollectUpdate: true,
      isUnlockUpdate: true, //关注，解锁的职位的职讯，职说等内容是否有更新，通过收藏，解锁的接口里判断时间是否大于点击后的点击时间来判断
      userInfo: {
        pic: this.$imgBase + 'common/avatar_default.png'
      },
      leftArrow: this.$imgBase + 'careerPath/returnBtnTop.png',
      myPositionsPopupShow: false,
      recentPosListHeight: 'auto', //近期推荐元素容器的高度
      isRecentMore: false, //用来控制近期推荐是否展开
      isRecentRecommandShow: false, //切换到后端返回的toptabsItem的时候需要展示近期推荐
      isHotRecommandShow: true, //全部职业的时候显示这个
      positionNum: 4558, //目前列表的总职位数目，一定要是数字类型，滚动加载的时候会用到加法
      currentTopTabIndex: '0',
      topTabsList: [
        {
          navId: '0',
          navLevel: 1,
          navName: '全部职业',
          positionOrMajor: 0
        }
      ], //顶部导航的一级职业列表，默认有全部，初始化的时候请求后端接口返回推荐的，筛选中筛选了也插入进来
      pageName: '',
      careerVipImg: this.$imgBaseSelf + 'career/careerVipImg.svg',
      recentMoreArrow: this.$imgBaseSelf + 'common/recentMoreArrowDown.png',
      recentMoreArrowUp: this.$imgBaseSelf + 'common/recentMoreArrowUp.png',
      recentMoreArrowDown: this.$imgBaseSelf + 'common/recentMoreArrowDown.png',
      allCareerIcon: this.$imgBaseSelf + 'common/allCareerIcon.png',
      cateArrowIcon: this.$imgBaseSelf + 'common/careerRightArrow.png',
      recomBoxIcon: this.$imgBaseSelf + 'common/recomBoxIcon.png',
      recentBoxIcon: this.$imgBaseSelf + 'common/recentBoxIcon.png',
      addCollectIcon: this.$imgBaseSelf + 'common/addCollectIcon.png',
      collectedtIcon: this.$imgBaseSelf + 'common/collectedtIcon.png',
      emptyImg: this.$imgBaseSelf + 'common/empty.png',
      defaultAvatar: this.$imgBase + 'common/avatar_default.png',
      navHeight: 0,
      topBg: `linear-gradient(181deg, #001B53 0%, rgba(0,35,91,0.47) 53%, #AEC4D0 100%);`,
      searchIcon: this.$imgBaseSelf + 'common/searchIcon.png',
      backgroundUrl: this.$imgBaseSelf + 'common/background.png',
      recomImg: this.$imgBaseSelf + 'common/recom.png',

      isFilterImgPlaying: false,
      // filterImg2:this.$imgBaseSelf + "common/screenAnimation/screen_" + 13 + ".png",

      filterImg2:
        this.$imgBaseSelf + 'common/screenAnimation/screen_' + 0 + '.png',
      filterImg:
        this.$imgBaseSelf + 'common/screenAnimation/screen_' + 0 + '.png',

      backtop: this.$imgBaseSelf + 'common/backtop.png',
      categoryTitle: '全部职业',
      positionOrMajor: 0,
      recommendList: [],
      recentRecommendList: [],
      shareTitle: '职业大全', // 分享自定义标题
      sharePath: '/pages/career/positionDictionary/allCategory', // 分享自定义路径
      scrollDomId: '',
      scrollTopTabDomId: '', //顶部scroll-view控制滚动
      careerTagId: '',
      levelNum: '',
      loading: true,
      positionsListShow: [],
      pageParams: {
        pageSize: 5,
        pageNum: 1,
        total: 0
      },
      personId: uni.getStorageSync('person-id').slice(2) || '',
      showTop: false,
      backtopShow: false,
      active: 0,
      showFixed: false,
      //滚动相关
      heightArr: [],
      distance: 0,
      fixedTitle: {
        parentTitle: '',
        tagTitle: '',
        posImg: ''
      },
      animationData: {},
      animationDataTop: {},
      animation: '',
      animationTop: '',
      updateBox: false,
      updateContent: '',
      status: 'loading',
      loadText: {
        loading: '加载中',
        nomore: '已经到底了~'
      },
      userAgent:
        uni.getSystemInfoSync().platform &&
        uni.getSystemInfoSync().platform.toLowerCase(),

      isPopupCollectShow: false,
      isPopupLockShow: false,
      // listCollectData: [
      //   {
      //     category: "财务法务 · 法律",
      //     jobNames: ["人力资源专员", "人力资源助理", "猎头顾问"],
      //   },
      // ],
      iconDeleteSrc:
        this.$imgBaseSelf + 'career/positionDictionary/collection_delete.webp',
      listRecommendCollection: [],
      listLockList: [],
      listCollection: [],
      isCollectionEditMode: false,
      editModeText: '编辑',
      recommendTabList: [
        {
          name: '推荐职业'
        },
        {
          name: '我的关注'
        },
        {
          name: '已解锁职业'
        }
      ],
      screenWidth: 375,
      recommendFromMajor: false,
      navigationList: [],
      loadedFirstIndex: 0, //已经请求回来的一级的下标
      filterData: {}, //筛选之后的参数，要保留一下在切换换tab的时候要重新请求
      scrollLimit: 255, //热门推荐的高度
      wrapperReduceHeight: 0,
      topHeight: 0,
      subStatus: '',
      subVipStatus: '',
      subId: '',
      expireStartTime: '',
      expireEndTime: '',
      specialEnterTopTab: false,
      qrCodeEnterList: {
        15292: {
          navId: '15292',
          navLevel: 1,
          levelNum: 1,
          navName: '生活服务',
          positionOrMajor: 0
        },
        12610: {
          navId: '12610',
          navLevel: 1,
          levelNum: 1,
          navName: '文化传媒',
          positionOrMajor: 0
        },
        15238: {
          navId: '15238',
          navLevel: 1,
          levelNum: 1,
          navName: '设计创意',
          positionOrMajor: 0
        },
        12021: {
          navId: '12021',
          navLevel: 1,
          levelNum: 1,
          navName: '金融',
          positionOrMajor: 0
        },
        13364: {
          navId: '13364',
          navLevel: 1,
          levelNum: 1,
          navName: '商业服务',
          positionOrMajor: 0
        },
        14196: {
          navId: '14196',
          navLevel: 1,
          levelNum: 1,
          navName: '土木建筑',
          positionOrMajor: 0
        },
        12411: {
          navId: '12411',
          navLevel: 1,
          levelNum: 1,
          navName: '化工',
          positionOrMajor: 0
        },
        16259: {
          navId: '16259',
          navLevel: 1,
          levelNum: 1,
          navName: '轨道交通',
          positionOrMajor: 0
        },
        14892: {
          navId: '14892',
          navLevel: 1,
          levelNum: 1,
          navName: '市场营销',
          positionOrMajor: 0
        }
      },
      qrCodeInsertItem: null,
      showReturnBtn: false,
      popCareerIcon:
        this.$imgBaseSelf + 'career/positionDictionary/salary_job_icon.png',
      returnBtnIcon:
        this.$imgBaseSelf + 'career/positionDictionary/returnBtnIcon.png',
      alertGoods: {
        goodsPic:
          this.$imgBaseSelf + 'career/positionDictionary/bannerAlert_699.png', //
        goodsId: '128317245100125'
      },
      showActPromotion: false,
      aiActBtnSrc:
        this.$imgBaseSelf +
        'career/positionDictionary/college_adv_iconGif2.gif',
      showAnimationBadge: false,
      showReturnBtnTop: false,
      buryingPointId: '',
      cardType: '',
      extends: '', // 是否可以扩展顶部tab栏
      selectCurrentHotPosition: false, //扫码进入是否默认选择热门职位
      showCollegeExtraConfig: false, //展示热门职业（算法工程师、大数据工程师、IC设计工程师）
      collegeExtraConfigList: [] //热门职业列表
    };
  },
  onLoad(options) {
    console.log('options', options);
    // 这个页面写在tabBar之后，切到这个页面只能用switchTab
    //而且onLoad不会在跳转之后再触发，所以写onshow里吧，需要传数据就用globalData
    if (options.showReturnBtnTop) {
      this.showReturnBtnTop = true;
    } else {
      this.showReturnBtnTop = false;
    }
    if (options.fromOrigin) {
      console.log('options', options.fromOrigin);
      this.showReturnBtn = true;
      this.fromOrigin = options.fromOrigin;
      this.positionTagId = options.positionTagId;
    }
    if (options.extends) {
      this.extends = options.extends;
    }
    this.getNaviData();

    this.filterImg =
      this.$imgBaseSelf +
      'common/screen_gif_one' +
      '.gif' +
      '?t=' +
      new Date().getTime();
    var intervalSec = 1000 * 3;
    this.filterTimer = setInterval(() => {
      this.isFilterImgPlaying = false;
      this.filterImg =
        this.$imgBaseSelf +
        'common/screen_gif_one' +
        '.gif' +
        '?t=' +
        new Date().getTime();
    }, intervalSec);
    //2023年11月3日16:12:20 需求：扫描一个特殊二维码进入之后要自动跳转到“生活服务”一级
    this.specialEnterTopTab = options.specialEnterTopTab;
    //但是后面又需要加几个二维码，旧码已经发出去了，不能更改，所以不动以前的在此基础上直接加一些东西
    if (options.qrCodeEnterId) {
      this.qrCodeInsertItem = this.qrCodeEnterList[options.qrCodeEnterId];
    }
    if (options.showHotPosition == 1) {
      this.selectCurrentHotPosition = true;
    }
  },
  onHide() {
    this.stopThatInterval();
    uni.setStorageSync('collectList', JSON.stringify(this.listCollection));
    uni.setStorageSync('unlockList', JSON.stringify(this.listLockList));
    this.$bus.$emit('setVippopUpVisible', false);
    console.log('这里进入了onHide');
    uni.setStorageSync('showReturnBtnTop', false); // 存储起来 下次从下一级页面返回来的时候去缓存中取这个值表示要显示左上角返回箭头
    this.showReturnBtn = false;
    this.showReturnBtnTop = false;
  },
  onUnload() {
    this.stopThatInterval();
    uni.setStorageSync('collectList', JSON.stringify(this.listCollection));
    uni.setStorageSync('unlockList', JSON.stringify(this.listLockList));
    this.showReturnBtn = false;
    this.showReturnBtnTop = false;
    uni.setStorageSync('currentTopTabIndex', this.currentTopTabIndex);
  },
  onShow() {
    console.log('这里进入onshow');
    // 初始化一个动画
    var animation = uni.createAnimation({
      duration: 400,
      timingFunction: 'ease'
    });
    this.animation = animation;

    // 初始化一个动画
    var animationTop = uni.createAnimation({
      duration: 400,
      timingFunction: 'ease'
    });
    this.animationTop = animationTop;
    this.personId = uni.getStorageSync('person-id').slice(2) || '';
    // this.getCollectionRecommendList();
    this.getPersonDetail(true);
    this.getRecommendList();
    this.reqGetUnlockedListAndCollectionList();
    //处理从别的页面跳过来的情况，但是因为要等获取后端的topTabsList,所以要延迟一下
    const allCategoryParams = getApp().globalData.allCategoryParams;
    if (allCategoryParams && allCategoryParams.advertise) {
      this.pageName = allCategoryParams.pageName;
      console.log('this.pageName', this.pageName);
      setTimeout(() => {
        this.handleFilter(allCategoryParams);
      }, 600);
      this.recommendFromMajor = true;
    } else {
      this.getRecommendList();
    }
    // this.getReduceHeight();
    // this.reqGetMySubscribeStatus();
    // this.showAIAlert();
    if (uni.getStorageSync('showReturnBtnTop')) {
      this.showReturnBtnTop = true;
    } else {
      this.showReturnBtnTop = false;
    }
    // this.getAlertToastProId();
  },
  created() {
    this.navHeight = getApp().globalData.navHeight + 10;
    this.handleNotice();
    this.reqRecommendFirstLayerList();
    this.getAllCollegeExtraConfigFn();
  },
  mounted() {
    wx.getSystemInfo({
      success: (res) => {
        this.screenWidth = res.screenWidth;
      }
    });
    this.personId = uni.getStorageSync('person-id').slice(2) || undefined;
  },
  onReachBottom() {},
  onPageScroll(e) {
    this.showTop = e.scrollTop >= 105;
    if (this.showTop) {
      this.isDark = true;
      this.dynamicTitle = this.positionName;
      uni.setNavigationBarColor({
        frontColor: '#000000',
        backgroundColor: ''
      });
    } else {
      this.isDark = false;
      this.dynamicTitle = '';
      uni.setNavigationBarColor({
        frontColor: '#ffffff',
        backgroundColor: ''
      });
    }
  },
  methods: {
    cancelLastLevel() {
      uni.navigateTo({
        url: `/pagesSub/careerGrow/careerSearch/index`
      });
    },
    //普通的埋点+事件停留埋点
    async addBuryingPointFn(
      etId,
      statType,
      jumpPersonId,
      jumpSource,
      sourceType
    ) {
      const params = {
        etId: etId,
        id: this.buryingPointId ? this.buryingPointId : '', //后台要求不能传空，未登录也要统计
        personId: uni.getStorageSync('person-id').slice(2) || '0',
        cardType: this.cardType
          ? this.cardType
          : uni.getStorageSync('cardType') || this.cardType,
        consultantId: uni.getStorageSync('sellId')
          ? uni.getStorageSync('sellId')
          : '',
        originType: this.originFrom == 'shareLink' ? 10 : 20,
        statType: statType ? statType : '10',
        jumpPersonId: jumpPersonId,
        jumpSource: jumpSource,
        sourceType: sourceType
      };
      const res = await addBuryingPoint(params);
    },
    reqGetMySubscribeStatus() {
      const params = {
        personId: this.personId
      };
      getMySubscribeStatus(params).then((res) => {
        if (res.code == 200) {
          this.subStatus = res.data.subStatus;
          this.subVipStatus = res.data.subVipStatus;
          this.subId = res.data.subId;
          this.expireStartTime = res.data.expireStartTime;
          this.expireEndTime = res.data.expireEndTime;
        }
      });
    },
    getReduceHeight() {
      const query = uni.createSelectorQuery().in(this);
      query.select('.scrollBox').boundingClientRect();

      query.exec((tabRes) => {
        this.topHeight = tabRes[0].top + 50;
      });
    },
    handleAvatarClick() {
      if (!this.personId) {
        this.$refs.loginDialog.setVisibility(true);
        return;
      }
      this.myPositionsPopupShow = true;
    },
    //重新计算显示fixedTitle的滚动距离,相关的可以搜这个方法名字；
    caculateScrollLimit() {
      setTimeout(() => {
        const query = uni.createSelectorQuery().in(this);
        query.select('.recentBox').boundingClientRect();
        query.exec((res) => {
          this.showFixed = false;
          this.scrollLimit = res[0].height;
          if (this.isRecentRecommandShow) {
            this.scrollLimit += 80;
          }
        });
        this.selectHeight();
      }, 400);
    },
    //获取个人信息
    getPersonDetail() {
      let param = {
        param: JSON.stringify({
          personId: this.personId
        }),
        where: '',
        slaveInfo: 1
      };
      getPersonDetail(param).then((res) => {
        this.userInfo = res.data || res;
        if (
          this.userInfo.pic &&
          this.userInfo.pic.indexOf('img.job1001.com/myUpload/pic.gif') >= 0
        ) {
          this.userInfo.pic = 'https://img3.job1001.com/ypMp/yw/images/male.png';
        }
      });
    },
    handleRecentMoreClick() {
      if (this.recentRecommendList.length <= 6) return;
      if (this.isRecentMore) {
        this.recentMoreArrow = this.recentMoreArrowDown;
        this.recentPosListHeight = 'auto';
      } else {
        this.recentPosListHeight =
          Math.ceil(this.recentRecommendList.length / 3) * 198;
        this.recentMoreArrow = this.recentMoreArrowUp;
      }
      this.caculateScrollLimit();
      this.isRecentMore = !this.isRecentMore;
    },
    //获取近期推荐列表
    reqRecentRecommendPositions(navId) {
      const params = { navId, pageNo: 1, pageSize: 999 };
      recentRecommendPositions(params).then((res) => {
        if (res.code == 200) {
          this.recentRecommendList = res.data;
          this.caculateScrollLimit();
        }
      });
    },
    // 进入职业大全是否新加一个tab栏
    getAllCollegeExtraConfigFn() {
      getAllCollegeExtraConfig({ ecCode: 'miniProgramHotPositions' }).then(
        (res) => {
          if (res.code == 200) {
            this.collegeExtraConfigList = JSON.parse(res.data.ecValue);
            //强行插入一个tab栏
            if (
              this.collegeExtraConfigList &&
              this.collegeExtraConfigList.length > 0
            ) {
              const obj = {
                navId: '-1',
                navLevel: 2,
                levelNum: 2,
                navName: res.data.remarkContent,
                positionOrMajor: 0
              };
              //遍历是否含有navId = -1的对象，如果有就替换，没有就插入
              let isHasObj = false;
              for (let i = 0; i < this.topTabsList.length; i++) {
                if (this.topTabsList[i].navId == '-1') {
                  this.topTabsList[i] = obj;
                  isHasObj = true;
                  break;
                }
              }
              if (!isHasObj) {
                this.topTabsList.splice(1, 0, obj);
              }
              if (this.selectCurrentHotPosition) {
                this.$nextTick(() => {
                  this.manuChangeTab(obj);
                });
              }
            }
          }
        }
      );
    },
    //获取topTabsList顶部的导航列表
    reqRecommendFirstLayerList() {
      recommendFirstLayerList().then((res) => {
        if (res.code == 200) {
          let arr = res.data.map((item) => {
            //isOrigin就是从后端获取的
            item.isOrigin = true;
            return item;
          });
          this.topTabsList = this.topTabsList.concat(arr);
          if (this.specialEnterTopTab) {
            const obj = {
              navId: '15292',
              navLevel: 1,
              levelNum: 1,
              navName: '生活服务',
              positionOrMajor: 0
            };
            this.topTabsList.push(obj);
            this.$nextTick(() => {
              this.manuChangeTab(obj);
            });
          }
          if (this.qrCodeInsertItem) {
            this.topTabsList.push(this.qrCodeInsertItem);
            this.$nextTick(() => {
              this.manuChangeTab(this.qrCodeInsertItem);
            });
          }
        }
      });
    },
    clickCollect(recom, index) {
      if (!this.personId) {
        this.$refs.loginDialog.setVisibility(true);
        return;
      }

      //先发送请求
      const params = {
        positionId: recom.ylPositionId,
        personId: this.personId,
        fromType: getApp().globalData.shareFrom
      };
      addToCollection(params).then((res) => {
        if (res.code == 200) {
          //再设置动效相关
          const item = this.recommendList[index]; //直接传recom进来会改不了
          this.$set(item, 'isClicked', true);
          setTimeout(() => {
            this.$set(item, 'collect', true);
            this.$set(item, 'collected', true);
          }, 1000);
          this.reqGetUnlockedListAndCollectionList();
        } else {
        }
      });
    },
    filterImgLoad() {
      this.isFilterImgPlaying = true;
    },
    stopThatInterval() {
      if (this.filterTimer) {
        clearInterval(this.filterTimer);
      }
      this.filterTimer = null;
      this.filterImg =
        this.$imgBaseSelf + 'common/screenAnimation/screen_' + 0 + '.png';
    },

    handleJump(personId) {
      uni.showToast({
        title: '登录成功',
        icon: 'none'
      });
      this.personId = personId;
      // this.getCollectionRecommendList();
      this.reqGetUnlockedListAndCollectionList();
    },
    // 获取公告
    handleNotice() {
      getNotice({ platform: 1 })
        .then((res) => {
          if (res.code == 200 && res.data) {
            this.updateContent = res.data.description || '';
            // let isUpdateFirst = uni.getStorageSync("isUpdateFirst") || "";
            let id = uni.getStorageSync('updateId') || 0;
            let currentTime = new Date().getTime();
            let publishTime =
              new Date(res.data.createTime).getTime() + 3 * 24 * 3600 * 1000;
            if (currentTime < publishTime && id < res.data.id) {
              this.updateBox = true;
              // uni.setStorageSync("isUpdateFirst", true);
              uni.setStorageSync('updateId', res.data.id);
            }
          } else {
          }
        })
        .catch((err) => {});
    },
    // 点击推广按钮
    clickActbtn() {
      if (this.showAnimationBadge) {
        this.showAnimationBadge = false;
        uni.setStorage({
          key: 'userDidClickActPromotionBtn',
          data: '1',
          success: function () {}
        });
      }
      this.pointCount(1);
      this.clickNext();
      this.addBuryingPointFn(20077, '', '', '', '');
      return;
      // this.showActPromotion=true;
      // this.pointCount(1);
    },
    //开启动画事件
    declick() {
      if (!this.off) {
        this.rotateAndScale();
        this.off = true;
      }
    },
    // 定义滚动时的动画内容
    rotateAndScale() {
      // 定义动画内容
      // this.animation.translateX(-80).step();
      this.animation.width('0rpx');
      this.animation.opacity(0).step();
      // this.animation.height('140rpx').step();
      // 导出动画数据传递给data层
      this.animationData = this.animation.export();

      this.animationTop.width('0rpx');
      this.animationTop.opacity(0).step();
      // this.animation.height('140rpx').step();
      // 导出动画数据传递给data层
      this.animationDataTop = this.animationTop.export();
      //三秒内不滚动时触发
      var timer = setTimeout(() => {
        this.off = false;
        this.animation.width('160rpx');
        this.animation.opacity(1).step();
        // this.animation.height('120rpx').step();
        this.animationData = this.animation.export();

        this.animationTop.width('64rpx');
        this.animationTop.opacity(1).step();
        // this.animation.height('120rpx').step();
        this.animationDataTop = this.animationTop.export();
      }, 2000);
    },
    handleToSearch() {
      uni.navigateTo({
        url: `/pagesSub/careerNew/positionDictionary/searchPos`
      });
    },
    openFilterBox() {
      this.stopThatInterval();
      this.$refs.filterBox.init();
      this.scrollDomId = '';
    },
    async toPositionDetail(item, parent) {
      let tagTitle = '';
      let positionId = '';
      let parentTitle = '';
      let topTitle = '';
      if (item.ylPositionId) {
        tagTitle = item.positionName || '';
        positionId = item.ylPositionId;
        parentTitle = item.parentName;
        topTitle = item.topName;
      } else {
        tagTitle = item.navName || '';
        positionId = item.valueId;
        parentTitle = item.parentName || parent.navName || '';
        topTitle =
          item.topName ||
          parent.parentName ||
          this.topTabsList[this.currentTopTabIndex].navName ||
          '';
      }

      wx.reportEvent('advertise', {
        uid: this.personId,
        career: tagTitle,
        page: this.pageName
      });

      let params = `positionName=${tagTitle}&positionId=${positionId}&parentTitle=${parentTitle}&topTitle=${topTitle}&pageName=${this.pageName}`;
      //请求接口看是否走新页面
      const templateId = await this.getPositionTemplateFn(positionId);
      if (templateId == 6) {
        uni.navigateTo({
          url: `/pagesSub/careerNewPositionDictionary/positionDetail?${params}`
        });
      } else {
        uni.navigateTo({
          url: `/pagesSub/careerNew/positionDictionary/positionDetail?${params}`
        });
      }
      // uni.navigateTo({
      //   url: `/pagesSub/careerNew/positionDictionary/positionDetail?${params}`,
      // });
    },
    async getPositionTemplateFn(positionId) {
      const res = await getPositionTemplate({ positionId: positionId });
      if (res.code == 200) {
        return res.data.templateId;
      } else {
        return 0;
      }
    },
    //监听scroll-view的滚动事件
    watchScroll: throttle(function (e) {
      this.backtopShow = false;
      this.scrollDomId = '';

      this.showFixed = e.detail.scrollTop > this.scrollLimit ? true : false;
      let addHeight = this.showFixed ? 35 : 0;
      let scrollTop = e.detail.scrollTop; //获取距离顶部的距离
      let active = this.active;
      if (scrollTop >= this.distance) {
        if (
          active + 1 < this.heightArr.length &&
          scrollTop >= this.heightArr[active] + addHeight
        ) {
          this.active += 1;
          // this.declick();
        }
      } else {
        if (
          active - 1 >= 0 &&
          scrollTop < this.heightArr[active - 1] + addHeight
        ) {
          this.active -= 1;
          // this.declick();
        }
      }
      this.declick();
      let obj = this.positionsListShow[this.active];
      console.log('obj', obj);
      this.fixedTitle = {
        parentTitle: obj ? obj.parentName : '',
        tagTitle: obj ? obj.navName : '',
        posImg: obj ? obj.navPhoto : ''
      };

      this.distance = scrollTop;

      this.backtopShow = true;
    }, 300),
    //计算每个锚点的高度
    selectHeight() {
      this.$nextTick(() => {
        let list = []; //这是二级的高度列表
        let height = this.userAgent == 'android' ? 200 : 260;
        const query = uni.createSelectorQuery().in(this);
        query.selectAll('.scrollItem').boundingClientRect();
        //因为这个query出来的height只是元素本身的高度，还要加上上面那个推荐栏的高度，而且是会变的
        //所以要用recentQuery查询一下recentBox的高度，但是由于query是异步的，所以这里只能写成这个if else的样子

        if (this.isRecentRecommandShow) {
          const recentQuery = uni.createSelectorQuery().in(this);
          recentQuery.select('.recentBox').boundingClientRect();
          recentQuery.exec((res) => {
            //-206是因为不知道为啥全部职业的时候的热门推荐recomBox不需要加，所以只给Height加recentBox和recomBox的差就好了
            height += res[0].height - 181;
            query.exec((res) => {
              res[0].forEach((item, index) => {
                height += parseInt(item.height);
                list.push(height);
              });
              this.heightArr = list;
            });
          });
        } else {
          if (!this.isHotRecommandShow && !this.isRecentRecommandShow) {
            height -= 206;
          }
          query.exec((res) => {
            res[0].forEach((item, index) => {
              height += parseInt(item.height);
              list.push(height);
            });
            this.heightArr = list;
          });
        }
      });
    },
    getNaviData() {
      getNavigationTree().then((res) => {
        if (res.code == 200) {
          this.navigationList = res.data;
          if (!this.recommendFromMajor) {
            //如果是从专业选择那里进来的就先不需要请求二三级
            this.getData(this.navigationList[0].navId);
          }
        }
      });
    },
    getData(navIds) {
      this.loading = true;
      this.status = 'loading';
      getCustomerPositionTree({ navIds })
        .then((res) => {
          if (res.code == 200) {
            // this.positionsListShow = [];
            // this.active = 0;
            this.positionsListShow = this.positionsListShow.concat(
              res.data[0].children.map((item) => {
                this.$set(item, 'showPhoto', true);
                return item;
              })
            ); //这里只包含了二三级
            // this.positionNum = +4558; //职位数目,小细菌说写死，以后如果改，记得问他最新的是多少
            this.selectHeight();
            if (res.data.length == 0 || res.data.children.length == 0) {
              //如果加载到一层没有数据的，就继续请求
              this.getData(this.navigationList[this.loadedFirstIndex].navId);
              this.positionsListShow.pop();
            }
            if (this.loadedFirstIndex >= this.positionsListShow.length) {
              this.status = 'nomore';
            }
          } else {
            uni.showToast({
              title: res.status_desc,
              icon: 'none'
            });
          }
          this.loading = false;
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    getMajorData(careerTagId = '', levelNum) {
      this.loading = true;
      this.status = 'loading';
      getNavigationListByTagId({
        positionTagId: careerTagId,
        tagLevel: levelNum
      })
        .then((res) => {
          if (res.code == 200) {
            this.positionsListShow = [];
            this.active = 0;
            this.positionNum = 0;
            let list = [];
            res.data.forEach((item, index) => {
              list = list.concat(item.children);
              this.positionNum += +item.positionNum;
            });
            this.positionsListShow = list;

            this.status = 'nomore';

            if (this.recommendFromMajor) {
              this.getRecommendFromMajor(list);
            }
            // this.pageParams = {
            //   pageSize: 5,
            //   pageNum: 1,
            //   total: res.data.length,
            // };
            // if (this.pageParams.total > this.pageParams.pageSize) {
            //   this.scrolltolower();
            // } else {
            //   this.positionsListShow = res.data;
            //   this.status = "nomore";
            // }
            this.selectHeight();
          } else {
            uni.showToast({
              title: res.status_desc,
              icon: 'none'
            });
          }
          this.loading = false;
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    getRecommendFromMajor(list) {
      if (list.length > 0) {
        let arr = [];
        let flag = false;
        for (let i = 0; i < list.length; i++) {
          if (flag) break;
          for (let j = 0; j < list[i].children.length; j++) {
            let item = list[i];
            let itemChild = list[i].children[j];

            itemChild.positionPic = itemChild.navPhoto || item.navPhoto;
            itemChild.positionName = itemChild.navName;
            itemChild.topName = itemChild.topName || item.parentName;
            arr.push(itemChild);
            if (arr.length >= 3) {
              flag = true;
              break;
            }
          }
        }
        if (arr.length == 0) {
          this.getRecommendList();
        } else {
          this.recommendList = arr;
        }
      } else {
        this.getRecommendList();
      }
    },
    // 触底加载 唉...
    scrolltolower: throttle(function (e) {
      if (this.loading || this.currentTopTabIndex != 0) {
        return;
      }
      this.loading = true;
      if (this.navigationList.length - 1 > this.loadedFirstIndex) {
        this.status = 'loading';
        this.loadedFirstIndex++;

        this.getData(this.navigationList[this.loadedFirstIndex].navId);
      } else {
        this.status = 'nomore';
      }
      // 遍历列表，设置一级分类的第一个子节点属性showImg为true
      this.loading = false;
    }),
    handleBackTop() {
      if (this.isHotRecommandShow) {
        this.scrollDomId = 'scrollTop';
      } else if (this.isRecentRecommandShow) {
        this.scrollDomId = 'scrollTop';
      } else {
        this.scrollDomId = 'scrollTop';
      }
      this.active = 0;
    },
    getRecommendList() {
      let params = {
        uid: this.personId,
        platform: 1
      };
      positionRecommendList(params)
        .then((res) => {
          if (res.code == 200) {
            this.recommendList = res.data || [];
          } else {
            uni.showToast({
              title: res.status_desc,
              icon: 'none'
            });
          }
        })
        .catch((err) => {});
    },
    //顶部tab的点击方法
    handleChangeTab(topTabsIndex) {
      this.showCollegeExtraConfig = false;
      console.log('这里点击了顶部tab', topTabsIndex);
      const topTabsItem = this.topTabsList[topTabsIndex];
      this.currentTopTabIndex = topTabsIndex;
      this.scrollDomId = 'scrollTop';
      this.active = 0;
      this.positionNum = 0;
      this.positionsListShow = [];
      this.isRecentMore = false;
      this.recentMoreArrow = this.recentMoreArrowDown;
      this.recentPosListHeight = 'auto';
      if (topTabsIndex == 0) {
        this.categoryTitle = topTabsItem.navName || '全部职业';
        this.careerTagId = this.navigationList[0].navId || '';
        this.getData(this.navigationList[0].navId);
        //全部职业的时候要展示热门推荐栏目
        this.isHotRecommandShow = true;
        this.isRecentRecommandShow = false;
      } else {
        if (!topTabsItem.positionOrMajor || topTabsItem.positionOrMajor == 0) {
          if (topTabsItem.navId == -1) {
            this.positionNum = 0;
            this.positionsListShow = []; //这里只包含了二三级
            this.showCollegeExtraConfig = true;
            this.status = 'nomore';
          } else {
            this.categoryTitle = topTabsItem.navName || '';
            this.careerTagId = topTabsItem.careerTagId || '';
            this.getSonNavigationTree(topTabsItem.navId, topTabsItem.navLevel);
          }
        } else {
          this.categoryTitle = topTabsItem.navName || '';
          this.careerTagId = topTabsItem.positionTagId || '';
          this.getMajorData(topTabsItem.navId, topTabsItem.navLevel, false);
        }

        this.isHotRecommandShow = false;
        //如果有createTime说明是后端返回的，所以需要有“近期推荐”栏目
        if (topTabsItem.isOrigin) {
          this.reqRecentRecommendPositions(
            topTabsItem.navLevel == 1
              ? topTabsItem.navId
              : topTabsItem.firstNavId
          );
          this.isRecentRecommandShow = true;
        } else {
          this.isRecentRecommandShow = false;
        }
      }
      //切换之后还要计算一下滚动时显示fixedTitle的距离，因为不同tab下面的推荐的高度是不一样的
      //由于近期推荐和热门推荐的高度是不一样的，所以滚动展示fixedTitle的滚动高度也是不同的
      if (this.isHotRecommandShow) {
        this.scrollLimit = 255;
        this.selectHeight();
      } else if (this.isRecentRecommandShow) {
        //因为情况太多，所以分开了很多地方写，可以搜caculateScrollLimit方法
      } else {
        this.scrollLimit = 80;
        this.selectHeight();
      }
    },
    //通过代码调用切换tab
    manuChangeTab(dataItem) {
      this.topTabsList.forEach((item, index) => {
        if (dataItem.navName == item.navName) {
          //他妈的出现filterBox的时候选2级要显示1级的名字但是查2级数据，还要和1级去重
          item.navLevel = dataItem.levelNum;
          item.firstNavId = item.navId;
          item.navId = dataItem.navId || dataItem.positionTagId;
          this.handleChangeTab(index);
        }
      });
    },
    handleFilter(data) {
      //从别的页面进来的positionOrMajor: 1的时候有的文字字段不是navName
      if (data.positionOrMajor == 1 && !data.navName) {
        data.navName = data.tagName;
      }
      this.filterData = data;
      this.active = 0;
      this.levelNum = data.levelNum || '';
      this.positionOrMajor = data.positionOrMajor;
      this.positionsListShow = [];
      //先重置一下顶部的active,之后在推入list之后再设置新的
      this.isRecentRecommandShow = false;
      this.isHotRecommandShow = false;
      if (data.positionOrMajor == 0) {
        //还要去重一下,因为一些需求，这里只能用navName 不能用navId对比
        if (
          this.topTabsList.find((item) => {
            return item.navName == data.navName;
          })
        ) {
          //如果有重复的话
          this.scrollTopTabDomId = 'cardHeader';
          this.manuChangeTab(data);
          return;
        }
        this.topTabsList.push({
          navId: data.navId,
          navLevel: data.levelNum,
          navName: data.navName || data.categoryTitle,
          positionOrMajor: data.positionOrMajor
        });
        // this.handleChangeTab(this.topTabsList.length - 1);
        this.categoryTitle = data.categoryTitle || '';
        this.careerTagId = data.careerTagId || '';
        this.getSonNavigationTree(data.navId, data.levelNum);
        if (this.fromOrigin != 'jobOrientation') {
          this.handleChangeTab(this.topTabsList.length - 1);
        } else {
          if (this.extends) {
            this.handleChangeTab(this.topTabsList.length - 1);
          } else {
            console.log('aaaaaa------', this.fromOrigin);
            setTimeout(() => {
              this.handleChangeTab(0);
            }, 1000);
          }
        }
        // this.handleChangeTab(this.topTabsList.length - 1);
      } else if (data.positionOrMajor == 1) {
        //这里会把专业的字段tagName,positionTagId改成了navName,navId之类的字段了，方便后面处理，这里要注意字段变了哦
        //还要去重一下

        if (
          this.topTabsList.find((item) => {
            return item.navName == data.navName;
          })
        ) {
          //如果有重复的话
          this.scrollTopTabDomId = data.positionTagId;
          this.manuChangeTab(data);
          // this.handleChangeTab(0);// 后来改需求这里要进来展示全部职业而不是历史搜索的某项 所以传入index为0
          return;
        }
        this.topTabsList.push({
          navId: data.positionTagId,
          navLevel: data.levelNum,
          navName: data.tagName,
          positionOrMajor: data.positionOrMajor
        });
        // this.handleChangeTab(this.topTabsList.length - 1);
        // 这里是修改顶部tab的逻辑
        this.categoryTitle = data.tagName || '';
        this.careerTagId = data.positionTagId || '';
        this.getMajorData(data.positionTagId, data.levelNum);
        if (this.fromOrigin == 'jobOrientation') {
          console.log('aaaa');
          this.handleChangeTab(this.topTabsList.length - 1);
        } else {
          console.log('2222');

          setTimeout(() => {
            this.handleChangeTab(0);
          }, 1000);
        }
        // this.handleChangeTab(this.topTabsList.length - 1);
      }
      setTimeout(() => {
        this.scrollDomId = 'cardHeader';
      }, 400);
      getApp().globalData.allCategoryParams = {};
    },
    getSonNavigationTree(navId, levelNum) {
      this.loading = true;
      this.status = 'loading';
      getSonNavigationTree({ navId, levelNum })
        .then((res) => {
          if (res.code == 200) {
            if (res.data.length) {
              this.positionNum = +res.data[0].positionNum;
            } else {
              this.positionNum = 0;
            } //职位数目
            this.positionsListShow = res.data[0].children; //这里只包含了二三级
            this.status = 'nomore';
            this.selectHeight();
          } else {
            uni.showToast({
              title: res.status_desc,
              icon: 'none'
            });
          }
          this.loading = false;
        })
        .catch((err) => {
          this.loading = false;
        });
    },

    // 单独获取unlockPositionList，不会判断内容更新状态
    getUnlockedPositionList() {
      if (!this.personId) {
        // uni.showToast({
        //   title: "请先登录",
        //   icon: "none",
        // });
        return;
      }
      unlockedNavigationPosition({}).then((res) => {
        if (res.code == 200) {
          this.listLockList = res.data;
        }
      });
    },
    // 单独获取collectionList，不会判断内容更新状态
    getCollectionList() {
      if (!this.personId) {
        // uni.showToast({
        //   title: "请先登录",
        //   icon: "none",
        // });
        return;
      }
      const params = {
        personId: this.personId
      };
      getCollectionListData(params).then((res) => {
        if (res.code == 200) {
          this.listCollection = res.data;
        } else {
        }
      });
    },
    //因为isContentUpdate需要同时判断collectionList和unlockPositionList里面的时间，所以把获取他们的接口写在同一个方法里
    async reqGetUnlockedListAndCollectionList() {
      if (!this.personId) {
        // uni.showToast({
        //   title: "请先登录",
        //   icon: "none",
        // });
        return;
      }
      const params = {
        personId: this.personId
      };
      const [collectionResult, unlockResult] = await Promise.allSettled([
        getCollectionListData(params),
        unlockedNavigationPosition(params)
      ]);

      if (
        collectionResult.status == 'fulfilled' &&
        collectionResult.value.code == 200
      ) {
        const storageCollectList = uni.getStorageSync('collectList');
        let formarCollectList = [];
        if (storageCollectList) {
          formarCollectList = JSON.parse(uni.getStorageSync('collectList'));
        }
        collectionResult.value.data.forEach((item) => {
          item.clickTime = 0;

          //如果之前有存了，那就把之前的clicktime取出来，否则为空
          try {
            if (formarCollectList && formarCollectList.length) {
              formarCollectList.find((formarElement, formarIndex) => {
                if (formarElement.positionId == item.positionId) {
                  item.clickTime = formarElement.clickTime;
                  return true;
                }
              });
            }
          } catch (error) {}
          //对比点击时间和更新时间
          const updateTime = new Date(item.updateTime).getTime();

          if (updateTime > item.clickTime) {
            item.isUpdate = true;
            this.isContentUpdate = true;
          }
        });
        this.listCollection = collectionResult.value.data;
      }

      // 解锁列表的
      if (
        unlockResult.status == 'fulfilled' &&
        unlockResult.value.code == 200
      ) {
        unlockResult.value.data.forEach((item) => {
          const storageUnlockList = uni.getStorageSync('unlockList');
          let formarUnlockList = [];
          if (storageUnlockList) {
            formarUnlockList = JSON.parse(uni.getStorageSync('unlockList'));
          }
          unlockResult.value.data.forEach((item) => {
            item.clickTime = 0;
            //如果之前有存了，那就把之前的clicktime取出来，否则为空
            if (formarUnlockList && formarUnlockList.length) {
              formarUnlockList.find((formarElement, formarIndex) => {
                if (formarElement.ylPositionId == item.ylPositionId) {
                  item.clickTime = formarElement.clickTime;
                  return true;
                }
              });
            }
            //对比点击时间和更新时间
            const updateTime = new Date(item.updateTime).getTime();
            if (updateTime > item.clickTime) {
              item.isUpdate = true;
              this.isContentUpdate = true;
            }
          });
        });
        this.listLockList = unlockResult.value.data;
      }
      // this.isContentUpdate = true;
    },
    getCollectionRecommendList() {
      if (!this.personId) {
        //   uni.showToast({
        //     title: "请先登录",
        //     icon: "none",
        //   });
        return;
      }
      const params = {
        personId: this.personId,
        page: 0,
        pageSize: 4,
        searchPhotoType: '2'
      };
      getCollectionListData(params).then((res) => {
        if (res.code == 200) {
          this.listRecommendCollection = res.data;
        } else {
        }
      });
    },
    clickPopupEdit() {
      if (this.isCollectionEditMode) {
        this.isCollectionEditMode = false;
        this.editModeText = '编辑';
      } else {
        this.isCollectionEditMode = true;
        this.editModeText = '退出编辑模式';
      }
    },
    editCollection(item) {
      const params = {
        positionId: item.positionId,
        personId: this.personId
      };
      cancelCollection(params).then((res) => {
        if (res.code == 200) {
          // this.getCollectionRecommendList();
          this.reqGetUnlockedListAndCollectionList();
        } else {
        }
      });
    },
    onPopupClose() {
      this.isCollectionEditMode = false;
      this.editModeText = '编辑';
    },
    async collectionToDetail(item) {
      //点了之后要把内容更新状态去掉,编辑状态也是
      item.clickTime = Date.now();
      item.isUpdate = false;
      this.isCollectionEditMode = false;
      this.editModeText = '编辑';
      let tagTitle = item.positionName || item.tagTitle;
      let positionId = item.valueId || item.ylPositionId || item.positionId;
      let parentTitle = item.parentName || item.parentTitle;
      let topTitle = item.topName || item.topTitle;
      let params = `positionName=${tagTitle}&positionId=${positionId}&parentTitle=${parentTitle}&topTitle=${topTitle}`;
      //请求接口看是否走新页面
      const templateId = await this.getPositionTemplateFn(positionId);
      if (templateId == 6) {
        uni.navigateTo({
          url: `/pagesSub/careerNewPositionDictionary/positionDetail?${params}`
        });
      } else {
        uni.navigateTo({
          url: `/pagesSub/careerNew/positionDictionary/positionDetail?${params}`
        });
      }
      // uni.navigateTo({
      //   url: `/pagesSub/careerNew/positionDictionary/positionDetail?${params}`,
      // });
    },
    onClickMoreCollection() {
      this.isPopupCollectShow = true;
    },
    onClickMoreUnlock() {
      this.isPopupLockShow = true;
    },
    onClickSubscribeUnlock() {
      uni.navigateTo({
        url: `/pagesSub/careerNew/positionDictionary/mySubs`
      });
    },
    loginSuccessBack() {
      this.personId = uni.getStorageSync('person-id').slice(2) || undefined;
      this.getCollectionRecommendList();
      if (this.currentTopTabIndex == 0) {
        this.getRecommendList();
      }
      this.reqGetUnlockedListAndCollectionList();
      this.getPersonDetail(true);
    },
    popCareerClick() {
      // this.showReturnBtn = false;
      // 这里有多个入口跳转到职业大全页面
      // 以为这个页面是根页面所以也不能使用uni.navigateBack()
      // 只能通过传递过来的参数跳转判断返回来的页面
      switch (this.fromOrigin) {
        case 'jobOrientation':
          uni.navigateTo({
            url:
              `/pagesSub/careerNew/majorDetail/index?positionTagId=` +
              this.positionTagId
          });
          break;
        case 'careerSearch':
          uni.navigateTo({
            url: `/pagesSub/careerGrow/careerSearch/index`
          });
          break;
        case 'poster':
          uni.navigateTo({
            url: `/pagesSub/careerGrow/collegeAdvertise/index`
          });
          break;
        default:
          break;
      }
    },
    getAlertToastProId() {
      getToastProId().then((res) => {
        if (res.data) {
          console.log('---getAlertToastProId-------->', res.data);
          this.alertGoods = res.data;
        }
      });
    }
    // ====BEGIN==== AI面评推广相关 ======
    // ========

    // showAIAlert() {
    //   let that = this;
    //   // 每次打开小程序只显示1次（改为每天弹一次）
    //   if (!this.showedPromotionAlert) {
    //     this.showedPromotionAlert = true;
    //     var nowTime = new Date();
    //     uni.getStorage({
    //       key: "userDidClickActCollegeAlertTime",
    //       success: function (res) {
    //         var localStorageTime = res.data;
    //         if (
    //           nowTime.getFullYear() != localStorageTime.getFullYear() ||
    //           nowTime.getMonth() != localStorageTime.getMonth() ||
    //           nowTime.getDay() != localStorageTime.getDay()
    //         ) {
    //           //年月日不同
    //           console.log(
    //             "------userDidClickActCollegeAlertTime---success-- > 1天-->",
    //             nowTime,
    //             localStorageTime
    //           );
    //           that.showActPromotion = true;
    //         } else {
    //           console.log(
    //             "------userDidClickActCollegeAlertTime---success-- < 1天-->",
    //             nowTime,
    //             localStorageTime
    //           );
    //           that.showActPromotion = false;
    //         }
    //       },
    //       fail: function () {
    //         console.log(
    //           "------userDidClickActCollegeAlertTime----fail--->",
    //           nowTime
    //         );
    //         that.showActPromotion = true;
    //       },
    //     });
    //   }
    // },

    // clickNext() {
    //   wx.reportEvent("home_alert_college_advertise_click", {}); //首页弹窗进入营销页
    //   this.addBuryingPointFn(20088, "", "", "", "");
    //   this.showActPromotion = false;
    //   /* 高中生职途小程序入口AB测试 20240611邹凌风废弃*/
    //   // const res = wx.getExptInfoSync(["expt_1716533327"]);
    //   // if (res.expt_1716533327 === undefined) {
    //   //   /* 返回空对象；未命中实验、实验待发布（白名单除外）或者实验结束后会命中该分支 */
    //   //   /* 业务逻辑，可对齐线上 */
    //   //   uni.navigateTo({
    //   //     url: "/pagesSub/careerGrow/collegeAdvertise/index",
    //   //   });
    //   // } else if (res.expt_1716533327 == "0") {
    //   //   /* 对照组业务逻辑 */
    //   //   uni.navigateTo({
    //   //     url: "/pagesSub/careerGrow/careerSearch/index",
    //   //   });
    //   // } else if (res.expt_1716533327 == "1") {
    //   //   /* 实验组1业务逻辑 */
    //   //   uni.navigateTo({
    //   //     url: "/pagesSub/careerGrow/collegeAdvertise/index",
    //   //   });
    //   // } else {
    //   //   /* 异常分支逻辑 */
    //   //   uni.navigateTo({
    //   //     url: "/pagesSub/careerGrow/collegeAdvertise/index",
    //   //   });
    //   // }
    //   uni.navigateTo({
    //     url: "/pagesSub/careerGrow/careerSearch/index",
    //   });
    // },
    // // // 数据统计
    // pointCount(step) {
    //   let eventTitle = step == 1 ? "首页按钮点击" : "首页弹窗点击";
    //   const params = {
    //     personId: this.personId,
    //     platform: "1",
    //     optCode: "aiPromotion",
    //     subOptCode: eventTitle,
    //     optIndex: step,
    //     description: "首页AI面评推广",
    //     moduleType: "demonstrate", // 模块类型(zt:职途，zph：招聘会活动-百职万岗，demonstrate：演示-扎堆)
    //   };
    // },
    // // 点击推广弹窗
    // clickAlert() {
    //   this.showActPromotion = false;
    //   var nowTime = new Date(); //点击以后一天弹一次
    //   uni.setStorage({
    //     key: "userDidClickActCollegeAlertTime",
    //     data: nowTime,
    //     success: function () {},
    //   });
    //   this.pointCount(2);
    //   // this.clickNext();
    //   this.addBuryingPointFn(20067, "", "", "", ""); //点击弹窗
    //   if (this.alertGoods.goodsId == '128317245100125') {
    //     wx.reportEvent("banner_alert_699_click", {});//进入699商品页
    //   } else {
    //     wx.reportEvent("banner_alert_8980_click", {});//进入8980商品页
    //   }
    //   // 跳转进商品详情页
    //   uni.navigateToMiniProgram({
    //     appId: "wx614f8a78fff34162",
    //     path:
    //       "/ec_goods/detail?productInstanceId=16868908125&vid=0&id=" +
    //       this.alertGoods.goodsId,
    //     success(res) {},
    //     fail(err) {},
    //   });
    // },
    // closeAlert() {
    //   this.showActPromotion = false;
    //   var nowTime = new Date(); //点击以后一天弹一次
    //   uni.setStorage({
    //     key: "userDidClickActCollegeAlertTime",
    //     data: nowTime,
    //     success: function () {},
    //   });
    //   this.pointCount(2);
    // },

    // ========
    // ===END===== AI面评推广相关 ======
  },
  watch: {
    listCollection: {
      handler(newValue, oldValue) {
        this.isCollectUpdate = newValue.find((item, index) => {
          return item.isUpdate;
        });
      },
      immediate: true,
      deep: true
    },

    listLockList: {
      handler(newValue, oldValue) {
        this.isUnlockUpdate = newValue.find((item, index) => {
          return item.isUpdate;
        });
      },
      immediate: true,
      deep: true
    }
  },
  computed: {
    isDotHide() {
      return !this.isCollectUpdate && !this.isUnlockUpdate;
    }
    // showLoginDialog() {
    //   this.personId = uni.getStorageSync("person-id").slice(2) || undefined;
    //   if (!this.personId) {
    //     this.$refs.loginDialog.setVisibility(true);
    //   }
    // },
  }
};
</script>

<style lang="scss" scoped>
@-webkit-keyframes fadenum {
  /*设置内容由隐藏变为显示*/
  0% {
    height: 0;
    opacity: 0;
  }

  100% {
    height: 190rpx;
    opacity: 1;
  }
}

@-webkit-keyframes searchAnimation {
  0% {
    width: 0;
    opacity: 0;
  }

  100% {
    width: 486rpx;
    opacity: 1;
  }
}

@keyframes addCollectScaleAnimation {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  30% {
    transform: scale(0.9);
    opacity: 0.9;
  }

  60% {
    transform: scale(1.1);
    opacity: 0.9;
  }

  100% {
    transform: scale(0);
    opacity: 0;
  }
}

@keyframes fixedTitleShowUp {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 0.7;
  }
}

::v-deep .u-close--top-right {
  top: 5rpx !important;
  right: 5rpx !important;
}

.wrapper {
  overflow: hidden; //如果去掉这个将引起布局滚动的重大问题，非必要别改
  max-width: 100vw;
  background: #f7f7f7;
  /* height: calc(100vh - 196rpx); */
  // height: 100vh !important;
  font-family: PingFangSC-Regular, PingFang SC;
  background: url($img-base + 'common/' + 'positionDictionary_background.png');
  background-position-x: -4rpx;
  background-repeat: no-repeat;
  background-size: 102% auto;

  .topTabs {
    font-size: 30rpx;
    font-weight: 400;
    color: #999999;
    line-height: 20px;
    padding: 0rpx 24rpx 0rpx 0rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;

    ::v-deep .u-scroll-box {
      padding-left: 24rpx;
    }

    .cardTitleContainer {
      display: flex;
      overflow-x: scroll;
      white-space: nowrap;

      u-tabs {
        width: 600rpx;
      }
    }

    .cardTitle {
      display: flex;
      margin-right: 48rpx;
      white-space: nowrap;
      /* 不换行 */
    }

    .active {
      position: relative;
      font-size: 36rpx;
      font-weight: 600;
      color: #fff;
      // &::after {
      //   content: "";
      //   position: absolute;
      //   width: 20px;
      //   height: 8px;
      //   background: linear-gradient(
      //     270deg,
      //     rgba(255, 255, 255, 0) 0%,
      //     #ff7731 100%
      //   );
      //   border-radius: 4px;
      //   bottom: -4rpx;
      //   left: 50%;
      //   transform: translateX(-50%);
      // }
    }

    .filterImg {
      width: 130rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: -20rpx;
      margin-left: 40rpx;

      image {
        width: 52rpx;
        height: 48rpx;
        margin-top: -18rpx;
      }

      text {
        margin-right: 8rpx;
        font-size: 24rpx;
        font-weight: 400;
        color: #b3b7c0;
        line-height: 34rpx;
        min-width: 52rpx;
      }
    }
  }

  .fixedTitleContainer {
    position: relative;

    .fixedTitle {
      position: sticky;
      display: none;
      justify-content: space-between;
      bottom: -50rpx;
      padding: 24rpx 32rpx 20rpx;
      margin: 0 16rpx;
      z-index: 1;
      background-image: url($img-base + 'common/' + 'position_scrollView_backgorund.png');
      background-size: 100% auto;
      background-repeat: no-repeat;
      border-radius: 16rpx 16rpx 0 0;

      &.showup {
        display: flex;
        animation: fixedTitleShowUp 0.1s ease-in-out;
      }

      .fixedTagTitle {
        font-size: 26rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #98a0b0;
        line-height: 36rpx;
        border-radius: 16rpx 16rpx 0 0;
      }

      .fixedTitlePhoto {
        position: absolute;
        top: -28rpx;
        right: 70rpx;
        width: 124rpx;
        height: 108.3rpx;
      }
    }
  }

  .padding {
    padding: 0rpx 32rpx 0;
  }

  .cardTitle {
    display: inline-flex;

    &.recom {
      font-size: 32rpx;
      font-weight: bold;
      color: #222222;
    }
  }

  .cardHeader {
    font-size: 30rpx;
    font-weight: 400;
    color: #999999;
    line-height: 20px;
    padding: 26rpx 12rpx 0 24rpx;
    display: flex;
    align-items: center;
    position: relative;

    .cateNameContainer {
      display: flex;
      align-items: center;

      .cateNameIcon {
        width: 40rpx;
        height: 40rpx;
      }

      .cateName {
        height: 42rpx;
        font-size: 30rpx;
        font-family: PingFang-SC-Bold, PingFang-SC;
        font-weight: bold;
        color: #000000;
        line-height: 42rpx;
        margin-left: 16rpx;
        margin-right: 16rpx;
      }

      .cateNum {
        font-size: 24rpx;
        color: #98a0b0;
      }

      .cateArrowIcon {
        width: 32rpx;
        height: 32rpx;
        margin-left: 8rpx;
      }

      .majorIcon {
        margin-left: 2rpx;
        font-size: 20rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ff7731;
        line-height: 28rpx;
        padding: 2rpx 8rpx;
        border-radius: 6rpx;
        border: 0.6rpx solid #ff7731;
      }
    }

    .active {
      position: relative;
      font-size: 32rpx;
      font-weight: 600;
      color: #000000;

      &::after {
        content: '';
        position: absolute;
        width: 20px;
        height: 8px;
        background: linear-gradient(
          270deg,
          rgba(255, 255, 255, 0) 0%,
          #ff7731 100%
        );
        border-radius: 4px;
        bottom: -4rpx;
        left: 50%;
        transform: translateX(-50%);
      }
    }

    .filterImg {
      width: 130rpx;
      height: 75rpx;
      position: absolute;
      right: 25rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: -20rpx;

      image {
        width: 52rpx;
        height: 48rpx;
        margin-bottom: 18rpx;
      }

      text {
        margin-right: 8rpx;
        font-size: 24rpx;
        font-weight: 400;
        color: #b3b7c0;
        line-height: 34rpx;
      }
    }
  }

  .cateTag {
    position: relative;
    top: 0;
    padding-bottom: 18rpx;
    padding-top: 24rpx;

    text {
      font-size: 26rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #98a0b0;
      line-height: 40rpx;
      width: 63%;
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-left: 20rpx;
    }

    .photo {
      width: 64rpx;
      height: 56rpx;
      position: absolute;
      bottom: 0;
      right: 76rpx;
    }

    .scaleImg {
      width: 140rpx;
      height: 124rpx;
    }
  }

  .styleHotRecommend {
    display: inline-block;

    .styleHotRecommendTitle {
      .styleHotRecommendimage {
        width: 40rpx;
        height: 40rpx;
        margin-right: 16rpx;
      }

      .styleHotRecommendtext {
        line-height: 40rpx;
      }
    }
  }

  .card {
    font-family: PingFang-SC-Bold, PingFang-SC;

    .recom {
      margin-bottom: 28rpx;
      display: flex;
      align-items: center;
    }

    .posList {
      display: flex;
      // flex-wrap: wrap;
      margin-top: 20rpx;
      overflow-x: scroll;
      // justify-content: space-between;

      .posItem {
        // width: 156rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-right: 40rpx;

        text {
          display: block;
        }

        .avator {
          width: 108rpx;
          height: 108rpx;
          border-radius: 50%;
          margin-bottom: 16rpx;
          position: relative;
          background: #ebebeb;

          & > image {
            width: 108rpx;
            height: 96rpx;
            position: absolute;
            bottom: 0;
            border-radius: 50%;
          }
        }

        .cate {
          max-width: 200rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 26rpx;
          line-height: 40rpx;
          color: #333333;

          &.name {
            margin-bottom: 8rpx;
            font-weight: 600;
          }
        }

        .cateTop {
          font-weight: 400;
          font-size: 24rpx;
          color: #98a0b0;
        }
      }

      .morePos {
        padding-top: 30rpx;
        height: 218rpx;
        width: 50rpx;
        background: #f6f6f6;
        border-radius: 6rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 22rpx;
        font-weight: 400;
        color: #bbbbbb;

        img {
          margin-top: 28rpx;
          width: 20rpx;
          height: 20rpx;
          margin-left: 5rpx;
        }

        view {
          text-align: center;
          width: 22rpx;
          line-height: 28rpx;
        }
      }

      // &::after {
      //   content: "";
      //   width: 222rpx;
      // }
    }

    .recomPosList {
      margin-top: 30rpx;
      padding-left: 28rpx;
    }
    .hotPositionList {
      justify-content: space-around;
      padding-left: 16rpx;
    }

    &.recomBox {
      position: relative;
      background-image: url($img-base + 'common/' + 'recomBox_background.png');
      background-color: white;
      box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(114, 165, 195, 0.3);
      background-size: 100% auto;
      background-repeat: no-repeat;
      border-radius: 32rpx;
      padding-top: 22rpx;

      padding-bottom: 24rpx;
      height: 341rpx; //如果你改动了这里，你要去上面那个selectHeight方法修改206的那个值，具体可以看方法里面的说明
      margin: 16rpx 16rpx 0;
      overflow-x: scroll;

      &::after {
        content: '';
        position: absolute;
        height: 366rpx;
        width: 44rpx;
        background: linear-gradient(
          270deg,
          #ffffff 0%,
          rgba(255, 255, 255, 0) 100%,
          #ffffff 100%
        );
        bottom: 0;
        right: 0;
        border-radius: 0 32rpx 32rpx 0;
        z-index: 11;
      }

      .recomBoxTitle {
        display: flex;
        padding-left: 28rpx;

        .recomBoxIcon {
          width: 40rpx;
          height: 40rpx;
        }

        .recomBoxName {
          margin-left: 16rpx;
          height: 42rpx;
          font-size: 30rpx;
          font-family: PingFang-SC-Bold, PingFang-SC;
          font-weight: bold;
          color: #000000;
          line-height: 42rpx;
        }
      }

      .swiper-item {
        .avator {
          position: relative;
          border-radius: 50%;

          .recomPosImg {
            border-radius: 50%;
          }

          .addCollectIcon {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 36rpx;
            height: 36rpx;

            // z-index: 10;
            // transition: transform 1s ease-in-out;
            &.isClicked {
              animation: addCollectScaleAnimation 1s ease-in-out;
            }
          }
        }
      }
    }

    &.recentBox {
      position: relative;
      background-image: url($img-base + 'common/' + 'recomBox_background.png');
      background-color: white;
      box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(114, 165, 195, 0.3);
      background-size: 100% auto;
      background-repeat: no-repeat;
      border-radius: 32rpx;
      padding-top: 22rpx;
      padding-left: 28rpx;
      padding-right: 28rpx;
      // padding-bottom: 24rpx;
      // height: 366rpx;
      overflow: hidden;
      margin: 0 16rpx 0;

      .recentBoxTitle {
        display: flex;

        .recentBoxIcon {
          width: 40rpx;
          height: 40rpx;
        }

        .recentBoxName {
          margin-left: 16rpx;
          height: 42rpx;
          font-size: 30rpx;
          font-family: PingFang-SC-Bold, PingFang-SC;
          font-weight: bold;
          color: #000000;
          line-height: 42rpx;
        }
      }

      .swiper-item {
        .posList.recentPosList {
          display: grid;
          grid-column-gap: 53rpx;
          grid-row-gap: 14rpx;
          grid-template-columns: repeat(3, 1fr);
          height: 585rpx;
          transition: height 0.5s ease;
          overflow: hidden;

          .posItem {
            margin-right: 0rpx;
          }
        }

        .posList.recentPosList.isRecentMore {
          // height: auto;
        }

        .avator {
          position: relative;
          border-radius: 50%;
          width: 124rpx;
          height: 124rpx;

          .recentPosImg {
            border-radius: 50%;
            width: 124rpx;
            height: 105.52rpx;
          }
        }
      }

      .recentMoreBtn {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #bdc6d9;
        font-size: 24rpx;
        height: 90rpx;

        .recentMoreArrow {
          width: 24rpx;
          height: 24rpx;
          margin-left: 4rpx;
        }
      }

      .recentMoreBlank {
        height: 94rpx;
      }
    }
  }

  .allPosition {
    position: relative;
    margin-top: 24rpx;
    border-radius: 16rpx 16rpx 0 0;
    background: #f4f6f8;
    background-image: url($img-base + 'common/' + 'position_scrollView_backgorund.png');
    background-size: 100% auto;
    background-repeat: no-repeat;
    margin: 24rpx 16rpx 0;
    padding-bottom: 350rpx;

    .positionList {
      padding: 0 12rpx;

      .posCard {
        position: relative;
        padding-bottom: 28rpx;

        .cateContent {
          display: grid;
          grid-row-gap: 16rpx;
          grid-column-gap: 5rpx;
          grid-template-columns: repeat(2, 1fr);

          &::after {
            content: '';
            width: 334rpx;
            flex-grow: 1;
            margin-left: 16rpx;
          }

          .positionItem {
            width: 334rpx;
            padding: 24rpx;
            background: #ffffff;
            border-radius: 16rpx;
            display: flex;
            flex-direction: column;
            flex-grow: 1;
            box-shadow: 0rpx 0rpx 8rpx 4rpx rgba(234, 238, 246, 0.5);

            text {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              font-family: PingFangSC-Regular, PingFang SC;
            }

            .tagTitle {
              font-weight: bold;
              color: #333333;
              line-height: 40rpx;
              font-size: 28rpx;
            }

            .desc {
              margin-top: 16rpx;
              font-size: 24rpx;
              color: #98a0b0;
              line-height: 34rpx;
              font-weight: 400;
            }
          }
        }
      }
    }
  }

  .scrollBox {
    padding-bottom: calc(42rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(42rpx + env(safe-area-inset-bottom));
  }

  .loading {
    min-height: calc(100vh - 700rpx);
    font-size: 28rpx;
    text-align: center;
    color: #c7c7c7;

    .text {
      margin-left: 12rpx;
    }
  }
}

.searchBox {
  display: flex;
  padding: 0rpx 32rpx 24rpx 32rpx;
  width: calc(100% - 40rpx);
  z-index: 100;
  margin-left: 40rpx;

  .rerurn-btn {
    width: 40rpx;
    height: 40rpx;
    /* background-color: red; */
    margin-right: 10rpx;
    background-image: url($img-base + 'careerPath/' + 'returnBtnTop.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  &.slotSearch {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0px 16rpx;
    padding-left: 0rpx;

    .avatar {
      position: relative;
      margin-right: 18rpx;

      .avatarItem {
        width: 56rpx;
        height: 56rpx;
        border: 4rpx solid #ffffff;
        border-radius: 50%;
      }

      .careerVipImg {
        position: absolute;
        width: 74rpx;
        height: 22rpx;
        bottom: 0rpx;
        left: -2rpx;
      }

      .updateDot {
        position: absolute;
        width: 16rpx;
        height: 16rpx;
        background: #f75a3e;
        border: 2rpx solid #ffffff;
        right: 0;
        top: 4rpx;
        border-radius: 50%;
      }

      .hideDot {
        display: none;
      }
    }

    .search {
      // width: 486rpx;
      flex: 1;
      height: 64rpx;
      animation: searchAnimation 0.2s;
    }
  }

  .title {
    margin-left: 212rpx;
  }

  .search {
    display: flex;
    flex: 1;
    align-items: center;
    height: 72rpx;
    border-radius: 36rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.32);

    .title {
      margin-left: 212rpx;
    }

    .desc {
      color: rgba(255, 255, 255, 0.7);
    }

    ::v-deep.u-content {
      padding: 0 20rpx 0rpx 32rpx;
    }

    ::v-deep.u-close-wrap {
      transform: scale(1.3);
    }

    .library-u-search {
      flex: 1;
      margin-right: 16rpx;
      width: 686rpx;
      height: 72rpx;
    }
  }

  .searchResult {
    width: 100%;
    background-color: #fff;
    bottom: -120rpx;
    height: calc(100vh - 160rpx);
    overflow: scroll;

    .resultList {
      overflow: scroll;
      padding-bottom: 160rpx;

      .resultItem {
        padding: 36rpx 32rpx;
        border-bottom: 1px solid #f5f5f5;

        &:last-of-type {
          border-bottom: 0;
        }

        .resultTitle {
          font-size: 30rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          line-height: 40rpx;
          margin-bottom: 16rpx;

          .light {
            color: #f75a3e;
          }
        }

        .resultDesc {
          font-size: 26rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #888888;
          line-height: 40rpx;
        }
      }
    }
  }

  .noneResult {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
  }

  .icon {
    width: 32rpx;
    height: 32rpx;
    margin-left: 28rpx;
    margin-right: 20rpx;
  }
}

.arrowUpward {
  position: absolute;
  bottom: 200rpx;
  right: 40rpx;
  width: 64rpx;
  height: 64rpx;
  background: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  box-shadow: 0px 2px 11px 0px rgba(196, 194, 194, 0.5);

  image {
    width: 44rpx;
    height: 44rpx;
  }
}

.stylePopup {
  background: #f7f8fa;

  ::v-deep .u-drawer__scroll-view {
    background-color: #f7f8fa;
  }

  .stylePopupContainer {
    display: flex;
    flex-direction: column;

    .stylePopupTop {
      position: fixed;
      display: flex;
      flex-direction: column;
      width: 100%;
      top: 0;
      background-color: #f7f8fa;
      z-index: 9999;

      .stylePopupTopLine {
        width: 72rpx;
        height: 10rpx;
        background: #d8d8d8;
        margin-left: auto;
        margin-right: auto;
        margin-top: 32rpx;
        border-radius: 5rpx;
      }

      .stylePopupTitleContainer {
        display: flex;
        justify-content: space-between;
        margin-top: 22rpx;

        .stylePopupTitle {
          color: #000000;
          margin-left: 32rpx;
          font-weight: bolder;
          font-size: 32rpx;
        }

        .stylePopupEdit {
          color: #f04646;
          font-size: 28rpx;
          padding-left: 32rpx;
          padding-right: 32rpx;
          padding-top: 20rpx;
          padding-bottom: 20rpx;
          font-weight: bold;
        }
      }
    }

    .styleListContainer {
      display: flex;
      flex-direction: column;
      position: relative;
      padding-top: 100rpx;
      margin-top: 26rpx;
      background: #f7f8fa;

      .Grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        // row-gap: 20rpx;
        // column-gap: 20rpx;
        padding-bottom: 32rpx;
        background: #f7f8fa;

        .styleSubListItem {
          position: relative;
          border-radius: 16rpx;
          background-color: #ffffff;
          margin-top: 18rpx;
          margin-left: 30rpx;
          padding-bottom: 24rpx;
          padding-left: 24rpx;
          padding-right: 24rpx;

          .styleSubListItemDeleteContainer {
            right: 0;

            .styleSubListItemImageDelete {
              float: right;
              width: 26rpx;
              height: 26rpx;
              padding-top: 14rpx;
              padding-left: 14rpx;
              padding-right: 14prpx;
              padding-right: 14rpx;
            }
          }

          .styleSubListItemJob {
            margin-top: 24rpx;
            width: 280rpx;
            font-size: 28rpx;
            font-weight: bolder;
            color: #222222;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
          }

          .styleSubListItemSpecialty {
            width: 280rpx;
            margin-top: 16rpx;
            color: #999999;
            font-size: 24rpx;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            text-overflow: ellipsis;
            overflow: hidden;
            -webkit-box-orient: vertical;
          }

          .styleSubListItemDescription {
            width: 280rpx;
            margin-top: 16rpx;
            color: #bfbfbf;
            font-size: 24rpx;
            display: -webkit-box;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
          }
        }
      }

      .hasUpdateDot {
        position: absolute;
        top: 12rpx;
        right: 0rpx;
        width: 16rpx;
        height: 16rpx;
        background: #f75a3e;
        border-radius: 50%;
        margin-right: 26rpx;
      }
    }
  }
}

::v-deep .empty {
  margin: 0 auto;

  text {
    color: #999999 !important;
    font-size: 28rpx !important;
  }
}

.swiper-box {
  margin-bottom: 0rpx;
  // height: 876rpx;
}

.noJob {
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  color: #999999;
  font-size: 32rpx;

  &::after {
    border: none !important;
  }
}

.styleCollectionMoreContainer {
  float: right;
  padding-top: 30rpx;

  .styleCollectionMore {
    display: flex;
    flex-direction: row;
    vertical-align: middle;
    justify-content: center;
    align-items: center;

    .styleTextCollectionMore {
      color: #999999;
      font-size: 24rpx;
    }

    .styleImageCollectionMore {
      margin-left: 14rpx;
      width: 12rpx;
      height: 24rpx;
    }
  }
}

.slot-content {
  padding: 30rpx 44rpx;
  color: #999999;
  line-height: 50rpx;
  font-size: 28rpx;
}

.pop-career {
  position: absolute;
  width: 80rpx;
  height: 80rpx;
  bottom: 118rpx;
  right: 40rpx;
}

.aiEnter {
  animation: shake 0.8s ease-in-out;

  position: fixed;
  bottom: 390rpx;
  // right: 30rpx;
  right: 0rpx;
  width: 160rpx;
  height: 160rpx;
  border-radius: 80rpx;
  // background-color: #fff;
  // box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  align-items: center;

  .aiText {
    display: none; //现在切的图片自带文字
    color: white;
    position: relative;
    top: -20rpx;
    background-color: #de7742;
    padding: 4rpx 15rpx;
    border-radius: 8rpx;
  }
}

.return-btn {
  position: absolute;
  width: 104rpx;
  height: 104rpx;
  background: #ffffff;
  box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(139, 140, 151, 0.5);
  bottom: 118rpx;
  right: 40rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 400;
  font-size: 24rpx;
  color: #888888;
}

// ::v-deep .u-drawer__scroll-view{
//   background-color: #F7F8FA;
// }
::v-deep .page-wrap .content-wrap {
  padding-bottom: 0;
}

::v-deep .page-wrap .nav-wrap .nav-bar .nav-content {
  justify-content: flex-start;
}

::v-deep .page-wrap .nav-wrap .nav-bar .nav-content .nav-title {
  min-width: 490rpx;
  margin-left: 32rpx;
  flex: 1;
  max-width: auto;
}

::v-deep .u-tabs-scroll-flex .u-tabs-item {
  flex: 0 !important;
}
</style>
